<template>
  <div>
    <div ref="chartRef" style="width:100%; height:600px"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import worldJson from './world.json';
export default defineComponent({
  props: {
    rowdata: {
      type: Array as PropType<Array>,
      default: [],  // 设置默认值
    },
    title: {
      type: String as PropType<string>,
      default: '同步通信卫星',  // 设置默认值
    },
    title1: {
      type: String as PropType<string>,
      default:'人造卫星',  // 设置默认值
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    onMounted(() => {
      initchart()
    })
    function initchart() {
      echarts.registerMap('world', worldJson);
      var CLUSTER_COUNT = 6;
var DIENSIION_CLUSTER_INDEX = 2;
var COLOR_ALL = [
  '#37A2DA',
  '#e06343',
  '#37a354',
  '#b55dba',
  '#b5bd48',
  '#8378EA',
  '#96BFFF'
];
var pieces = [];
for (var i = 0; i < CLUSTER_COUNT; i++) {
  pieces.push({
    value: i,
    label: 'cluster ' + i,
    color: COLOR_ALL[i]
  });
}
      setOptions({
        legend: {
          orient: 'vertical',
          left: 'right',
          top:'15%'
        },
        tooltip: {
          trigger: 'item'
        },
        graphic: [
          {
            type: 'text',
            id: 'mainTitle',
            left: 20,
            top: 20,
            style: {
              text: props.title,
              fill: '#333',
              fontSize: 20,
              fontWeight: 'bold',
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            id: 'subTitle',
            left: 20,
            top: 50,
            style: {
              text: props.title1,
              fill: '#999',
              fontSize: 12,
              textAlign: 'center'
            }
          },
        ],
        grid: {
          top: '10%',
          left: '10%',
          bottom: '10%',
          right: '10%',
        },
        toolbox: {
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {},
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          type: 'piecewise',
          top: 'middle',
          min: 0,
          max: CLUSTER_COUNT,
          left: 10,
          splitNumber: CLUSTER_COUNT,
          dimension: DIENSIION_CLUSTER_INDEX,
          pieces: pieces
        },
        geo: {
          map:'world',
          roam: true, // 允许缩放和平移
          itemStyle: {
              // 地图区域的样式
              normal: {
                areaColor: '#97ccf6', // 设置地图区域的颜色
                borderColor: '#80aaec' // 设置边界线的颜色
              },
              emphasis: {
                areaColor: '#C6E2FF' // 鼠标悬浮时的颜色
              }
            }
        },
        series: [
          // {
          //   type: 'map',
          //   map: 'world',
          //   roam: true, // 允许缩放和平移
          //   itemStyle: {
          //     // 地图区域的样式
          //     normal: {
          //       areaColor: '#97ccf6', // 设置地图区域的颜色
          //       borderColor: '#80aaec' // 设置边界线的颜色
          //     },
          //     emphasis: {
          //       areaColor: '#C6E2FF' // 鼠标悬浮时的颜色
          //     }
          //   }
          // },
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: [
              {
                name:"dian1",
                value: [
                  116.405285,
                  39.904985
                ],
              },
              {
                name:"dian2",
                value: [
                  136.405285,
                  39.904985
                ],
              },
              {
                name:"dian3",
                value: [
                  156.405285,
                  39.904985
                ],
              },
            ],
            symbolSize:20,
            // 可以添加更多标记点
            itemStyle: {
              normal: {
                color: "#478335",
              },
            },

          },

        ],
      })
    }
    return {
      chartRef,
      initchart
    }
  }
})
</script>
<style scoped lang=less>
.index2 {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>